<template>
	<div class="label-rule">
		<div class="label-rule-left">
			<el-select v-model="sqlDataid" filterable placeholder="请选择数据库" @change="sqlDataChange">
				<el-option v-for="item in sqlDataList" :key="item.id" :label="item.name" :value="item.id"></el-option>
			</el-select>
			<el-select v-model="tableSqlDataid" filterable placeholder="表名" @change="tableSqlDataChange">
				<el-option v-for="item in tableSqlDataList" :key="item.tableName" :label="item.tableName" :value="item.tableName"></el-option>
			</el-select>

			<el-scrollbar style="height: 400px">
				<el-tree class="table-tree" :data="treeData" node-key="index" @node-click="handleNodeClick" lazy>
					<template #default="{ data }">
						{{ data.fieldName }}
					</template>
				</el-tree>
			</el-scrollbar>
		</div>

		<div class="label-rule-right">
			<el-tabs v-model="ruleForm.mode" @tab-click="changeSqlData" type="card">
				<el-tab-pane label="条件维护" name="1" lazy>
					<div class="rules-box">
						<el-button type="primary" @click="handleAddFunc()" :icon="Plus"> 新增计算公式 </el-button>
						<div class="gongsi-wrap" v-for="item in RuleServiceDataForm.funcsData" :key="item.id">
							<span class="tit">{{ item.name }}</span>
							<el-input v-model="item.value" placeholder="表名.字段名称 - 表名.字段名称 (例：当前日期-高血压.确诊日期)"> </el-input>
							<el-button @click="handleAddOpt(item)" type="text">引用</el-button>
						</div>
					</div>

					<!-- <div class="rules-box">
						<el-button type="primary" icon="el-icon-plus" @click="handleAddRule()"> 新增规则 </el-button>
					</div>

					<div class="sql-result">
						<h3>测试提示：</h3>
						<div class="run-res">{{ sqlResult || '--' }}</div>
						<div class="sql-preview">
							<p class="title">SQL代码：</p>
							<p>{{ ruleForm.generateSql || '--' }}</p>
						</div>
					</div> -->
				</el-tab-pane>

				<el-tab-pane label="SQL生成" name="2" lazy>
					<div style="height: 450px">
						<DataStudio ref="dataStudioRef"></DataStudio>
					</div>
					<el-divider class="label-line"></el-divider>
					<div class="sql-result">
						<h3>测试提示：</h3>
						<div class="run-res">{{ sqlResult || '--' }}</div>
					</div>
				</el-tab-pane>
			</el-tabs>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import DataStudio from './data-studio.vue'
import { getLabelSqlList, getTableList, getTableColumns } from '@/api/labels-mana/index'
import { ElMessage } from 'element-plus'
const ruleForm = reactive({
	mode: '2',
	ruleDTO: {}
})
const treeKeyword = ref()
const treeData = ref()
const dataStudioRef = ref()
const sqlResult = ref()
const handleSearch = () => {}
const handleNodeClick = () => {}

const RuleServiceDataForm: any = ref({
	sqlDataid: '',
	funcsData: [],
	quotes: []
})

const sqlDataid = ref('')
const sqlDataList = ref([])
const tableSqlDataid = ref('')
const tableSqlDataList = ref([])
const columnsDataName = ref('')
const columnsDataNameList = ref([])

const changeSqlData = (pane: any) => {
	console.log(pane.paneName)
}

const init = () => {
	sqlDataid.value = ''
	tableSqlDataid.value = ''
	columnsDataName.value = ''
	sqlDataList.value = []
	tableSqlDataList.value = []
	columnsDataNameList.value = []
	getSqlList()
}

const getSqlList = () => {
	getLabelSqlList().then(res => {
		sqlDataList.value = res.data
		sqlDataid.value = res.data[0].id

		if (sqlDataid.value) {
			getTableNameList()
		}
	})
}

const sqlDataChange = value => {
	sqlDataid.value = value
	RuleServiceDataForm.value.sqlDataid = value
	if (sqlDataid.value) {
		getTableNameList()
	}
}

const getTableNameList = () => {
	getTableList(sqlDataid.value).then(res => {
		tableSqlDataList.value = res.data
		tableSqlDataid.value = res.data[0].tableName
		if (tableSqlDataid.value) {
			getColumnsNameList()
		}
	})
}

const tableSqlDataChange = value => {
	tableSqlDataid.value = value
	if (tableSqlDataid.value) {
		getColumnsNameList()
	}
}

const getColumnsNameList = () => {
	getTableColumns(sqlDataid.value, tableSqlDataid.value).then(res => {
		treeData.value = res.data
	})
}

const initBqgzFunSql = (bqgzList, funList: any, dtsql, tablename, zd) => {
	RuleServiceDataForm.value.funcsData = funList

	dataStudioRef.value.setEditorValue(dtsql)
}

// 公式
const handleAddFunc = () => {
	let funcsDataList: any = RuleServiceDataForm.value.funcsData ? RuleServiceDataForm.value.funcsData : []

	const k = funcsDataList && funcsDataList.length ? (funcsDataList.slice(-1)[0] || {}).name : '@'

	funcsDataList.push({
		id: Date.now() + '',
		name: String.fromCharCode(k.charCodeAt(0) + 1),
		value: ''
	})

	RuleServiceDataForm.value.funcsData = [...funcsDataList]
}
// 引用
const handleAddOpt = func => {
	if (func.value.trim() === '') return ElMessage.error('请输入公式内容！')
	const arr = RuleServiceDataForm.value.quotes
	const nOpt = { label: func.name, value: func.value }
	const index = findIndex(arr, o => o.label === func.name)
	if (index !== -1) {
		arr.splice(index, 1, nOpt)
	} else {
		arr.push(nOpt)
	}
	ElMessage.success('公式引用成功！')
}

// 获取sql编辑器内容
const getSqlContent = () => {
	return dataStudioRef.value.getEditorValue()
}

// 获取tabs的下标
const getTabsIndex = () => {
	return ruleForm.mode
}

defineExpose({
	init,
	initBqgzFunSql,
	getTabsIndex,
	RuleServiceDataForm,
	getSqlContent
})
</script>

<style lang="scss" scoped>
.label-rule {
	display: flex;
	margin-bottom: 20px;
	min-height: 400px;

	.label-rule-left {
		width: 250px;
		padding: 10px 12px 10px 0;
		border-right: 1px solid #e5e6eb;

		.date-btn {
			margin: 16px 0 10px;
		}

		.table-tree {
			max-height: 600px;
			overflow: auto;
			overflow-x: hidden;
		}

		.tree-text {
			flex: 1;
			display: inline-block;
			overflow: hidden;
			font-size: 14px;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}

	.label-rule-right {
		flex: 1;
		padding: 10px 0 10px 16px;

		.label-line {
			margin: 16px 0;
		}

		.rules-box {
			border-bottom: 1px solid #e5e6eb;
			margin-bottom: 16px;

			> button {
				margin-bottom: 16px;
			}

			.gongsi-wrap {
				display: flex;
				justify-content: space-between;
				align-items: center;
				gap: 12px;
				margin-bottom: 16px;

				.tit {
					width: 16px;
				}
			}
		}

		.sql-result {
			color: #1d2129;
			line-height: 24px;

			h3 {
				font-size: 16px;
				margin-bottom: 8px;
			}
			.run-res {
				margin-bottom: 8px;
			}
			.sql-preview {
				background: #f7f8fa;
				padding: 15px;

				p.title {
					font-weight: bold;
					margin-bottom: 8px;
				}
			}
		}
	}

	.label-result {
		line-height: 24px;
		color: #1d2129;

		h3 {
			font-size: 16px;
			font-weight: bold;
			margin-bottom: 6px;
		}
	}
}
</style>